<template>
  <div>
    <p :class="$style.title">当前本组座席状态</p>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="group"
        align="center"
        label="所属座席组"
        min-width="200">
      </el-table-column>
      <el-table-column
        prop="name"
        label="客服姓名"
        align="center"
        min-width="200">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        min-width="200">
      <template slot-scope="scope">
        <span :class="scope.row.status == 1 ? $style.green : scope.row.status == 2 ? $style.yellow : scope.row.status == 3 ? $style.gary : ''"></span>
        <span>{{scope.row.status == 1 ? '在线' : scope.row.status == 2 ? '暂离' : scope.row.status == 3 ? '离线' : ''}}</span>
      </template>
      </el-table-column>
    </el-table>


    <p :class="$style.title">当前本组排队信息</p>
    <el-table
      :data="tableData1"
      border
      style="width: 100%">
      <el-table-column
        prop="index"
        label="排队位置"
        align="center"
        min-width="200">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="来电号码"
        align="center"
        min-width="200">
      </el-table-column>
      <el-table-column
        prop="group"
        label="所属组别"
        align="center"
        min-width="200">
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        seatsKf:{}
      }
    },
    computed: {

      userInfo(){
        return this.$store.getters.getUserInfo
      },
      tableData(){
        let seats = this.$store.getters.seats
        // console.log('tbJseats:',  JSON.stringify(seats))
        // console.log('tbseats:',  seats)
        // return 
        this.seatsKf = this.$store.state.user.seatKf
        let tmpa = []
        if (this.userInfo.userGroupId == 1) {
          tmpa = seats
        } else {
          // console.log('map:', seats)
          seats.map(o => {
            if (this.seatsKf[o.username]) {
              this.seatsKf[o.username][0].status = o.status;
              this.seatsKf[o.username][0].usertel = o.username;
              tmpa.push(this.seatsKf[o.username][0])
            }
          })
          console.log('map s:', JSON.stringify(seats))
          // console.log('map t:', JSON.stringify(tmpa))
        }
        // console.log(tmpa)
        tmpa.sort(function(a, b) {
          return a.status - b.status
        })
        return tmpa
      },
      tableData1(){
        const queues = this.$store.getters.queues
        const userInfo = this.userInfo
        const getGroup = this.$store.getters.getGroup
        let tmpa = []
        if (userInfo.userGroupId == 1) {
          tmpa = queues
        } else {
          queues.map(o => {
            if (userInfo.userGroupId == o.group) {
              tmpa.push(o)
            }
          })
        }
        tmpa.forEach(function(o,index) {
          o.index = index
          o.group = getGroup[o.group] ? getGroup[o.group] : o.group
        }, this)
        return tmpa
      }
    },
  }
</script>
<style lang="scss" module>
  .title {
    margin: 30px 0;
  }
  .green {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    display: inline-block;
    background: #42e65f;
  }
  .yellow {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    display: inline-block;
    background: #ffa838;
  }
  .gary {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    display: inline-block;
    background: #bdc3cb;
  }
</style>

